<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>IdeaBank</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
	
	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic' rel='stylesheet' type='text/css'>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="js/jquery.colorbox-min.js"></script>
	<script src="js/jquery.mCustomScrollbar.js"></script>
	<script src="js/jquery.rateit.js" type="text/javascript"></script>
	
	<script>
    $(document).ready(function($){
		$('.thumb:nth-child(3n)').addClass('last');
		
		$(".proj_gallery").colorbox({rel:'proj_gallery', transition:"fade", maxheight:"95%"});
		
		$("#rate").bind('rated', function (event, value) { $('#value5').text(value + ' / 5'); });
		
		if($(document).height()<650){
			$('#cat_options').hide();
			$('#cat_dropdown').show();
		}else{
			$('#cat_options').show();
			$('#cat_dropdown').hide();
		}
		
		$(".proj_cont").mCustomScrollbar({
			set_width:false,
			horizontalScroll:true,
			autoDraggerLength:false,
			mouseWheel:false,
			scrollInertia:250, 
			scrollButtons:{
				scrollAmount:700 
			}
		});
		
		var winHeight = $(window).height();
		var pageheadHeight = $('.page_head').height();
		var ideaHeight = winHeight - pageheadHeight;
		$('.idea').css('height',ideaHeight);
		var ideaheadHeight = $('.idea_head').height();
		var ideacontentHeight = Math.round(((ideaHeight - ideaheadHeight -30 -70 -25)/ideaHeight*100));
		$('.idea_content').css('height',ideacontentHeight+'%');
    });	
	
	$(window).resize(function() {
		var bodyheight = $(document).height();
		var pageheadHeight = $('.page_head').height();
		var ideaHeight = bodyheight - pageheadHeight;
		$('.idea').css('height',ideaHeight);
		var ideaheadHeight = $('.idea_head').height();
		var ideacontentHeight = Math.round(((ideaHeight - ideaheadHeight -30 -70 -25)/ideaHeight*100));
		$(".idea_content").height(ideacontentHeight+'%');
		
		if($(document).height()<650){
			$('#cat_options').hide();
			$('#cat_dropdown').show();
		}else{
			$('#cat_options').show();
			$('#cat_dropdown').hide();
		}
	});
	
	$(document).ready(function($){
		$(".idea_content").mCustomScrollbar({
			scrollInertia:250, 
			mouseWheel:true, 
			autoDraggerLength:false,
			contentTouchScroll:true
		});
	});
    </script>
</head>

<body>
	<div class="sidebar">
		<a href="index.html"><img src="images/logo_ideabank.png" /></a>
		<div class="text_welcome">
			Welcome <a href="#">Admin</a>
		</div>
		<div class="searchbar">
			<input type="search" class="search left" /><input type="submit" class="btn_search left" value="" />
		</div>
		<ul class="nav">
			<li><a href="#">HOW IT WORKS</a></li>
			<li><a href="#">BROWSE</a></li>   
			<li><a href="#">CREATE</a></li> 
			<li><a href="#">FAQ</a></li> 
			<li><a href="#">CONTACT</a></li> 
			<li><br /></li>
			<li><a href="#">SIGN UP</a></li>          
			<li><a href="#">LOG IN <img src="images/icon_lock.png" /></a></li>
		</ul><!--End of .nav-->
		
		<div class="filter_cat">
			<b class="weight600">CATEGORIES</b><br />
			<select style="display:none;" id="cat_dropdown">
				<option>All Fields</option>
				<option>Art</option>
				<option>Comics</option>
				<option>Dance</option>
				<option>Fashion</option>
				<option>Film & Video</option>
				<option>Food</option>
				<option>Games</option>
				<option>Music</option>
				<option>Photography</option>
				<option>Publishing</option>
				<option>Technology</option>
				<option>Theater</option>
			</select>
			<ul id="cat_options">
				<li><a href="#" class="active">All Fields</a></li>
				<li><a href="#">Art</a></li>
				<li><a href="#">Comics</a></li>
				<li><a href="#">Dance</a></li>
				<li><a href="#">Design</a></li>
				<li><a href="#">Fashion</a></li>
				<li><a href="#">Film & Video</a></li>
				<li><a href="#">Food</a></li>
				<li><a href="#">Games</a></li>
				<li><a href="#">Music</a></li>
				<li><a href="#">Photography</a></li>
				<li><a href="#">Publishing</a></li>
				<li><a href="#">Technology</a></li>
				<li><a href="#">Theater</a></li>
			</ul>
		</div><!--End of .filter_cat-->
		<div cass="clearboth"></div>
		
		<div class="foot clearboth">
			Copyright © 2014 Ideabank.<br />
			All rights reserved.
		</div><!--End of .foot-->
	</div><!--End of .sidebar-->
	<div class="container">
		<div class="wrapper">
			<ul class="acc_nav">
				<li><a class="active view_stat" href="#">VIEW STATUS</a></li>
				<li><a class="edit_acc" href="#">EDIT ACCOUNT</a></li>
			</ul><!--End of .acc_nav-->
			
			<div class="content">
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dui eros, sodales at velit eu, adipiscing facilisis justo. Vivamus in eleifend purus. Donec a accumsan purus. Proin nec facilisis massa. Vestibulum viverra nulla ut dui tristique, et ullamcorper diam porta. Vivamus molestie, odio ut faucibus convallis, nisl urna viverra nisl, in tristique eros tellus eget velit. Donec posuere mauris nec lorem malesuada malesuada.</p>
					
				<p>Phasellus magna turpis, mollis non porta eu, mattis non nisi. Quisque rhoncus lorem ut nulla placerat feugiat. Mauris sit amet justo ante. Integer lacinia auctor dapibus. Aliquam ac lectus pharetra, scelerisque tellus at, ultrices erat. Vivamus sagittis mauris ipsum, consequat auctor sem dapibus id. Proin suscipit mattis luctus. Integer elementum neque ut ante commodo, eget condimentum ipsum lobortis. Nam interdum nisl diam, quis hendrerit sem blandit vestibulum. Donec at cursus dolor. Cras a velit quis diam rutrum dignissim a sit amet augue. Sed consequat sapien at velit semper interdum. Fusce luctus vel arcu vitae pellentesque. Etiam hendrerit ornare felis quis venenatis. Donec sed luctus ipsum, a mollis turpis. Cras id arcu pharetra, laoreet tortor in, faucibus orci.</p>
			</div><!--End of .content-->
		</div><!--End of .wrapper-->
	</div><!--End of .container-->
</body>
</html>
